<template>
  <div class="zhengtirendu base-background-img">
    <div class="left">
      <img @click="toggleTabs('dec')" src="~@/assets/youxiaoxianjie/home/left.png">
    </div>
    <div class="right">
      <img @click="toggleTabs('add')" src="~@/assets/youxiaoxianjie/home/right.png">
    </div>
    <component :is="currentView" keep-alive></component>
  </div>
</template>

<script>
  import zhengtirendu1 from './zhengtirendu/zhengtirendu1'
  import zhengtirendu2 from './zhengtirendu/zhengtirendu2'
  import zhengtirendu3 from './zhengtirendu/zhengtirendu3'
  import zhengtirendu4 from './zhengtirendu/zhengtirendu4'
  import zhengtirendu5 from './zhengtirendu/zhengtirendu5'
  export default {
    name: 'zhengtirendu',
    data () {
      return {
        currentIndex: 1,
        currentView: 'youxiao-zhengtirendu1'
      }
    },
    components: {
      'youxiao-zhengtirendu1': zhengtirendu1,
      'youxiao-zhengtirendu2': zhengtirendu2,
      'youxiao-zhengtirendu3': zhengtirendu3,
      'youxiao-zhengtirendu4': zhengtirendu4,
      'youxiao-zhengtirendu5': zhengtirendu5
    },
    methods: {
      toggleTabs: function (func) {
        if (func === 'add') {
          if (this.currentView !== 'youxiao-zhengtirendu5') {
            this.currentIndex = this.currentIndex + 1
            this.currentView = 'youxiao-zhengtirendu' + this.currentIndex
          }
        } else {
          if (this.currentView !== 'youxiao-zhengtirendu1') {
            this.currentIndex = this.currentIndex - 1
            this.currentView = 'youxiao-zhengtirendu' + this.currentIndex
          }
        }
      }
    }
  }
</script>

<style scoped>

.zhengtirendu > div {
  position: absolute; 
}
.left {
  top: 330px;
  left: 40px;
  z-index: 10;
}
.right {
  top: 330px;
  left: 1210px;
  z-index: 10;
}
.b {
  top: 282px;
  left: 240px;
}
.p {
  top: 268px;
  left: 478px;
}
.m {
  top: 280px;
  left: 675px;
}
.f {
  top: 295px;
  left: 893px;
}
</style>
